<template>
    <div id="updateAdmin">
        <el-form
            :model="oldAdmins"
            :ref="oldAdmins"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item
                label="密码"
                prop="password"
                :rules="[{ required: true, message: '密码不能为空' }]"
            >
                <el-input
                    v-model="oldAdmins.password"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(oldAdmins)"
                    >提交</el-button
                >
                <el-button @click="resetForm(oldAdmins)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("admin");
export default {
    props: ["_id"],
    created() {
        this.getAdminsById({ _id: this._id });
    },
    computed: {
        ...mapState(["oldAdmins"]),
    },
    methods: {
        ...mapActions(["getAdminsById", "updateAdmins"]),
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const result = await this.updateAdmins({
                        _id: this._id,
                        password: this.oldAdmins.password,
                    });
                    if (result.data.code) {
                        this.$message("修改成功");
                    } else {
                        this.$message("修改失败");
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style lang='scss'>
#updateAdmin {
    line-height: 1;
    .el-form {
        width: 300px;
        margin: 0 auto;
    }
    .el-input {
        width: 250px;
    }
}
</style>